<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/admin/editormd/css/editormd.css}"/>
    <link rel="stylesheet" th:href="@{/js/index2.css}">

<!--
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index2.css">
-->
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.css">
    <script th:src="@{/js/utlis.js}"></script>
    <script>
        var id = getUrlParam("id");
    </script>
    <style>
        .inputbox {

            background-color: white;
            font-size: 12px;
            border: 1px solid #dcdee2;
            border-radius: 6px;
            margin-bottom: 18px;
            padding: 6px 1px 1px 6px;
            text-align: left;
            font-size: 0;
            margin-bottom: 0;
        }

        .input {
            font-size: 14px;
            border: none;
            box-shadow: none;
            outline: none;
            background-color: transparent;
            padding: 0;
            margin: 0;
            width: auto !important;
            max-width: inherit;
            min-width: 80px;
            vertical-align: top;
            height: 30px;
            color: #34495e;
            margin: 2px;
            line-height: 30px;
        }

        .arrbox {
            border-radius: 6px;
            margin-bottom: 10px;
            padding: 6px 1px 1px 6px;
            text-align: left;
            font-size: 0;
        }

        .spanbox {
            line-height: 30px;
            margin: 2px;
            padding: 0 10px;
            background-color: #67C23A;
            color: white;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            overflow: hidden;
            transition: 0.25s linear;
        }

        .spanbox:hover {
            padding: 0px 17px 0 3px;
        }

        .spanclose {
            color: white;
            padding: 0 10px 0 0;
            cursor: pointer;
            font-size: 12px;
            position: absolute;
            right: -3px;
            text-align: right;
            text-decoration: none;
            top: 0;
            width: 100%;
            bottom: 0;
            z-index: 2;
            opacity: 0;
            filter: "alpha(opacity=0)";
            transition: opacity 0.25s linear;
            font-style: normal;
        }

        .spanbox:hover .spanclose {
            padding: 0 10px 5px 0;
            opacity: 1;
            -webkit-filter: none;
            filter: none;
        }

        .spanclose:after {
            content: "x";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 27px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-pagination {
            text-align: right;
            padding: 15px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatars {
            width: 178px;
            height: 178px;
            display: block;
        }

        [v-cloak]{
            display: none
        }
    </style>
    <title>文章管理</title>
</head>
<body>

<div id="app" v-cloak>

    <div class="content-header" style=" padding: 10px;
    border-radius: 4px;
    background: white;
    margin-bottom: 10px;">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">博客管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>写博客</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container" v-loading="loading">
        <div class="box">
            <div class="add-form">
                <!--form表单  -->
                <el-form ref="dataForm" :rules="rules" :inline="true" :model="formInline" class="demo-form-inline"
                         style="width: 100%; padding: 15px;height: 900px;">
                    <!--                    <el-form-item
                                                prop="author">
                                            <el-input v-model="formInline.author" value="625" style="display: none" type="text"></el-input>
                                        </el-form-item>-->
                    <el-form-item
                            prop="title">
                        <el-input v-model="formInline.title" placeholder="文章标题" style="width: 1300px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onDraft()" plain>保存为草稿</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="onSave()" plain>发布文章</el-button>
                    </el-form-item>
                    <div id="test-editor">
                        <textarea style="display:none;">{{content}}</textarea>
                    </div>

                    <el-dialog title="发布文章" :visible.sync="dialogFormVisible">

                        <!--<el-form :model="addForm" ref="addForm" :rules="rules">-->
                        <el-form-item label="文章简介" :label-width="formLabelWidth" prop="name" style="height: 49px  ">
                            <el-input v-model="introduce"></el-input>
                        </el-form-item>
                        <el-form-item label="文章标签" :label-width="formLabelWidth" prop="Tags">
                            <template>
                                <div class="inputbox">
                                    <!--<div class="arrbox">-->
                                    <div v-for="(item,index) in labelarr" :key="index" class="spanbox">
                                        <span>{{item}}</span>
                                        <i class="spanclose" @click="removeitem(index)"></i>
                                    </div>
                                    <input
                                            name="Tags"
                                            placeholder="输入后回车"
                                            size="5"
                                            v-model="currentval"
                                            @keyup.enter="addlabel"
                                            class="input"
                                            type="text"
                                    >
                                    <!-- 常用label展示 -->
                                    <div></div>
                                </div>
                            </template>
                        </el-form-item>
                        <el-form-item label="文章封面" :label-width="formLabelWidth">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/image/blogUpload"
                                    name="imgFile"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatars">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false" type="text" style="color:#c4c4d6;">取 消
                            </el-button>
                            <el-button type="text" @click="onDraft()" plain>保存为草稿</el-button>
                            <el-button type="danger" @click="onSubmit()" plain>发布文章</el-button>
                        </div>
                    </el-dialog>
                </el-form>
            </div>
        </div>
    </div>
</div>


<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/upload.js"></script><!--引入图片复制粘贴的js-->
<!--<script th:src="@{/js/vue.js}"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/axios-0.18.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script th:src="@{admin/editormd/editormd.js}"></script>
<!--<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/editormd.js"/>-->
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data: {
            imageUrl: '',
            content: '',
            title: '',
            introduce:'',
            formInline: {}, //表单数据
            rules: {
                title: [
                    {required: true, message: '标题不能为空', trigger: 'blur'}
                ]
            },
            dialogFormVisible: false,
            loading: false,
            formLabelWidth: '120px',
            currentval: '',
            labelarr: [],
            isChange: false,

        },
        methods: {
            // 移除标签
            removeitem(index) {
                this.isChange = true;
                this.labelarr.splice(index, 1)
            },
            // input回车加入labelarr中
            addlabel() {
                this.isChange = true;
                let count = this.labelarr.indexOf(this.currentval)
                if (count === -1) {
                    this.labelarr.push(this.currentval)
                }
                this.currentval = '';
            },
            handleAvatarSuccess(response, file) {
                //这里的response相当于我们自己发送的ajax请求的响应中的res.data
                //为模型数据imgUrl赋值，用于页面图片预览
                this.imageUrl = response.data;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message
                });
                //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
                this.formInline.img = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            onSubmit() { //发布博客
               // console.log("labelarr=====>"+this.labelarr);
               // console.log("isChange=====>"+this.isChange);
                this.formInline.Tags = this.labelarr;
                axios.post("/admin").then((res) => {
                    this.formInline.author = res.data.data.id;
                    this.$refs['dataForm'].validate((valid) => {
                        if (valid) {//进行最终的编辑表单校验
                            var blogcontent = editor.getMarkdown();//获取博客信息
                            this.formInline.content = blogcontent;//设置表单内容
                            /**  判断当页面内容不变时，不需要提交*/
                            if (!(blogcontent === this.content&&this.introduce===this.formInline.introduce && this.title === this.formInline.title && this.isChange === false)) {
                                /**
                                 * 当id不为空时才会提交编辑的请求
                                 * */

                                if (id.length >= 1) {
                                    axios.put("/article/" + id + "/" + this.formInline.Tags, this.formInline).then((res) => {

                                        if (res.data.flag) {
                                            this.$message.success('发布成功');
                                        } else {
                                            this.$message.error('发布异常');
                                        }

                                    });
                                } else {
                                    /**
                                     * 当id为空时才会提交添加的请求
                                     * */
                                    axios.post("/article/" + this.formInline.Tags, this.formInline).then((res) => {
                                        if (res.data.flag) {
                                            this.$message.success('发布成功');
                                            // Load('main-table.html');//1秒后跳转
                                        } else {
                                            this.$message.error('发布异常');
                                        }
                                    });
                                }
                            } else {
                                this.$message({
                                    message: "发布成功，无修改",
                                    type: "info",
                                    showIcon: true
                                });

                            }
                        } else {
                            /*  this.$message.error("");*/
                            return false;
                        }
                    });
                    this.loading = true;
                    Load('main-table.html');//1秒后跳转
                })

            },
            onDraft() { //保存到草稿箱
                this.formInline.Tags = this.labelarr;
            /*    axios.post("/admin").then((res) => {
                    this.formInline.author = res.data.data.id;*/
                    this.$refs['dataForm'].validate((valid) => {
                        if (valid) {//进行最终的编辑表单校验
                            var blogcontent = editor.getMarkdown();//获取博客信息
                            this.formInline.content = blogcontent;//设置表单内容
                            this.formInline.status = 1;
                          /*  /!**  判断当页面内容不变时，不需要提交*!/
                            if (!(blogcontent === this.content && this.title === this.formInline.title)) {*/
                                /**
                                 *
                                 * 当id不为空时才会提交编辑的请求
                                 *
                                 *
                                 * */
                                if (id.length >= 1) {
                                    axios.put("/article/" + id, this.formInline).then((res) => {

                                        if (res.data.flag) {
                                            this.$message.success('发布成功');
                                        } else {
                                            this.$message.error('发布异常');
                                        }

                                    });
                                } else {
                                    /**
                                     *
                                     * 当id为空时才会提交添加的请求
                                     *
                                     *
                                     * */
                                    axios.post("/article", this.formInline).then((res) => {
                                        if (res.data.flag) {
                                            this.$message.success('发布成功');
                                        } else {
                                            this.$message.error('发布异常');
                                        }
                                    });
                                }
                         /*   } else {
                                this.$message({
                                    message: "发布成功，无修改",
                                    type: "info",
                                    showIcon: true
                                });

                            }*/
                        } else {
                            /*  this.$message.error("");*/
                            return false;
                        }
                    });
                    this.loading = true;
                    Load('main-table.html');
         /*       })*/
            },
            onSave() {
                this.dialogFormVisible = true;
            }
        },
        mounted() {
            if (id.length >= 1) {
                axios.get("/article/" + id).then((res) => {
                    this.title = res.data.data.title;
                    this.content = res.data.data.content;
                    this.introduce = res.data.data.introduce;
                    this.formInline = res.data.data;
                    this.imageUrl=res.data.data.img;
                    this.labelarr = res.data.data.tagNames;
                    this.taggs = res.data.data.tagNames;
                    //console.log(this.content)
                });

            }
        }
        ,
        watch: {
           /* currentval: function () {
                this.isChange = true;
            },*/
            labelarr(old, cur) {
                this.$emit('on-change', this.labelarr)
            },
            parentarr() {
                if (this.parentarr.length > 0) {
                    this.labelarr = [];
                    for (let i = 0; i < this.parentarr.length; i++) {
                        this.labelarr.push(this.parentarr[i])
                    }
                } else {
                    this.labelarr = []
                }
            }
        }
    });
    var editor;
    // 配置md
    $(function () {
        editor = editormd("test-editor", {
            placeholder: "欢迎使用纤叶博客",
            width: "100%",
            height: "100%",
            emoji: true,

            /**上传图片相关配置如下*/
            imageUpload: true,
            htmlDecode: "style,script,iframe|on*",
            //previewTheme: "dark",//预览主题
            //editorTheme: "pastel-on-dark",//编辑框的主题颜色
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/image/upload",//注意你后端的上传图片服务地址
            tocm: true, // Using [TOCM]
            tex: true, // 开启科学公式TeX语言支持，默认关闭
            path: "admin/editormd/lib/",
            onload: function () {
                initPasteDragImg(this); //必须

            }
        });
    });
</script>
</body>

</html>